<template>
  <div>
    <Drawer
      :closable="false"
      :mask-closable="true"
      @on-visible-change="
        (e) => {
          !e && $emit('closePreModal', false);
          playing = false;
        }
      "
      :width="500"
      v-model="showPre"
    >
      <h3>{{ preInfo.title }}</h3>
      <Carousel
        autoplay
        v-model="value"
        loop
        class="ivu-mt-16"
        v-if="preInfo.type == 2"
      >
        <CarouselItem v-for="item in preInfo.attachment" :key="item.file_url">
          <div class="pre-carousel">
            <img :src="item.file_url" alt="" style="width: 100%" />
          </div>
        </CarouselItem>
      </Carousel>
      <div
        class="videoBox ivu-mt-16"
        v-if="preInfo.type == 1 && preInfo.attachment.length > 0"
      >
        <video
          ref="video"
          :src="preInfo.attachment[0]['file_url']"
          class="video"
          @click="onPlay"
          style="width: 100%"
          controls
          :disablePictureInPicture="true"
          controlslist="nodownload nofullscreen"
        ></video>
        <div class="playing" :style="{ display: playing ? 'none' : 'block' }">
          <Icon
            type="md-play"
            class="btn"
            @click="onPlay"
            color="#fff"
            size="80"
          />
        </div>
        <Button
          type="primary"
          @click="handleDown(0)"
          v-if="showDownLoad"
          class="videoDown"
          size="small"
          v-hasC="{
            name: 'v1-buss-content-download',
            flag: 'v1/buss/content/download',
          }"
          >下载</Button
        >
      </div>

      <div class="pre-con" v-html="preInfo.content"></div>

      <div class="pre-drawer-footer">
        <Button
          style="margin-right: 8px"
          @click="
            $emit('closePreModal', false);
            playing = false;
          "
          >取消</Button
        >
        <Button
          type="primary"
          v-if="showDownLoad"
          @click="handleDown(1)"
          v-hasC="{
            name: 'v1-buss-content-download',
            flag: 'v1/buss/content/download',
          }"
          >下载</Button
        >
      </div>
    </Drawer>
  </div>
</template>
<script>
import Setting from "@/setting";
import util from "@/libs/util";
import { downloadInfo, contentDownload } from "@api/content.js";
export default {
  props: ["showPre", "contentId", "showDownLoad"],
  data() {
    return {
      value: 0,
      fileUrl: "",
      preInfo: {},
      playing: false,
    };
  },
  watch: {
    showPre() {
      if (this.showPre) {
        this.value = 0;
        this.fileUrl =
          Setting.request.apiBaseURL +
          `/v1/buss/content/download?auth_access_token=${util.cookies.get(
            "token"
          )}&id=${this.contentId}`;
        downloadInfo({ id: this.contentId }).then((res) => {
          this.preInfo = res;
          this.preInfo.content = this.preInfo.content.replaceAll(
            "href",
            "target=_blank href"
          );
          if (res.type == 1) {
            const video = this.$refs.video;
            if (video) {
              video.pause();
            }
          }
        });
      } else {
        this.onPause();
      }
    },
  },
  methods: {
    handleDown(type) {
      if (type == 0) {
        contentDownload({ is_zip: type, id: this.contentId }).then((res) => {
          window.open(
            res.download_url + `?auth_access_token=${util.cookies.get("token")}`
          );
        });
      } else if (type == 1) {
        window.open(this.fileUrl + "&is_zip=" + type);
      }
    },
    onPause() {
      const video = this.$refs.video;
      this.playing = false;
      video.pause();
    },
    onPlay() {
      const video = this.$refs.video;
      this.playing = !this.playing;
      if (this.playing) {
        video.play();
      } else {
        video.pause();
      }
    },
  },
};
</script>
<style lang="less" scoped>
.pre-carousel {
  height: 200px;
  background: #000;
}
.pre-con {
  margin-top: 16px;
  padding-bottom: 60px;
}

.pre-drawer-footer {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 500px;
  box-sizing: border-box;
  border-top: 1px solid #e8e8e8;
  padding: 10px 20px;
  text-align: right;
  background: #fff;
}
// .pre-drawer-footer {
//   position: relative;
// }
.videoBox {
  position: relative;
}
.playing {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(7, 17, 27, 0.5);
  text-align: center;
}
.playing .btn {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
.videoDown {
  display: none;
  position: absolute;
  right: 10px;
  top: 10px;
}
.videoBox:hover .videoDown {
  display: block;
}
.pre-carousel {
  height: auto;
  max-height: 500px;
}
.pre-carousel img {
  display: block;
}
video::-webkit-media-controls-fullscreen-button {
  display: none;
}
video::-webkit-media-controls-play-button {
  display: none;
}
video::-webkit-media-controls-toggle-closed-captions-button {
  display: none;
}
</style>
